<template>
  <div class="file-management">
    <main>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="一等奖:车模" prop="rank_1" label-width="160px">
          <el-input v-model.number="ruleForm.rank_1" placeholder="请输入一等奖数量"></el-input>
        </el-form-item>
        <el-form-item label="二等奖:果冻包" prop="rank_2" label-width="160px">
          <el-input v-model.number="ruleForm.rank_2" placeholder="请输入二等奖数量"></el-input>
        </el-form-item>
        <el-form-item label="三等奖:立减100元券" prop="rank_3" label-width="160px">
          <el-input
            v-model.number="ruleForm.rank_3"
            readonly
            class="readonly"
            placeholder="请输入三等奖数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="四等奖:立减50元券" prop="rank_4" label-width="160px">
          <el-input
            v-model.number="ruleForm.rank_4"
            readonly
            class="readonly"
            placeholder="请输入四等奖数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="五等奖:立减5元券" prop="rank_5" label-width="160px">
          <el-input
            v-model.number="ruleForm.rank_5"
            readonly
            class="readonly"
            placeholder="请输入五等奖数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="六等奖:立减3元券" prop="rank_6" label-width="160px">
          <el-input
            v-model.number="ruleForm.rank_6"
            readonly
            class="readonly"
            placeholder="请输入六等奖数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="谢谢参与" prop="rank_7" label-width="160px">
          <el-input v-model.number="ruleForm.rank_7" placeholder="请输入六等奖数量"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script setup>
  import { getPrizeInfo, setPrizeNum } from '@/api/prize';
  import { ref, reactive } from 'vue';

  const ruleFormRef = ref(null);
  const ruleForm = ref({
    rank_1: '',
    rank_2: '',
    rank_3: '',
    rank_4: '',
    rank_5: '',
    rank_6: '',
    rank_7: '',
  });

  const rules = reactive({
    rank_1: [{ type: 'number', required: true, message: '请输入一等奖数量', trigger: 'blur' }],
    rank_2: [{ type: 'number', required: true, message: '请输入二等奖数量', trigger: 'blur' }],
    rank_3: [{ type: 'number', required: true, message: '请输入三等奖数量', trigger: 'blur' }],
    rank_4: [{ type: 'number', required: true, message: '请输入四等奖数量', trigger: 'blur' }],
    rank_5: [{ type: 'number', required: true, message: '请输入五等奖数量', trigger: 'blur' }],
    rank_6: [{ type: 'number', required: true, message: '请输入六等奖数量', trigger: 'blur' }],
    rank_7: [{ type: 'number', required: true, message: '谢谢参与数量', trigger: 'blur' }],
  });

  const getPrizes = async () => {
    const res = await getPrizeInfo();
    if (res.code === 200) {
      // 使用整体赋值以触发响应式更新
      ruleForm.value = Object.keys(res.data).reduce((acc, item) => {
        acc[`rank_${item}`] = res.data[item];
        return acc;
      }, {});
      console.log(ruleForm.value);
    }
  };

  const submitForm = async () => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate(async (valid) => {
      if (valid) {
        const promises = [];
        for (let i = 1; i <= 7; i++) {
          promises.push(
            setPrizeNum({
              prizeLevel: i,
              count: ruleForm.value[`rank_${i}`],
            })
          );
        }

        try {
          const results = await Promise.all(promises);
          if (results.every((res) => res.code === 200)) {
            ElMessage.success('保存成功');
          }
        } catch (error) {
          ElMessage.error('保存失败');
        }
      }
    });
  };

  const resetForm = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.resetFields();
  };

  onMounted(() => {
    getPrizes();
  });
</script>
<style lang="scss" scoped>
  .file-management {
    main {
      padding: 20px;
      background: #fff;
      .table-hint {
        padding-right: 0px;
      }

      .hint-right {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        .upload-btn {
          .svg-icon {
            margin-right: 8px;
          }
        }
      }
      .table-content {
        padding: 0;
      }
    }
  }
  :deep(.readonly .el-input__wrapper) {
    background: #eee !important;
    border-color: #eee;
  }
</style>
